<template>
    <div class="food-container">
       <div class="header">
           <p>人员管理>>添加</p>
           <el-button type="primary" @click="$router.push('/staffList')">返回</el-button>
       </div>
       <div class="main">
           <div class="table-wrap">
               <div class="header-wrap">详情</div>
               <div class="wrap-menu">
                   <div class="menu-list">
                       <div class="menu-name">头像</div>
                       <div class="menu-info">
                           <div class="avatar">
                               <img style="width:60px;height:60px;border-radius:50%;" :src="info.imageUrl" alt="">
                           </div>
                       </div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">姓名</div>
                       <div class="menu-info">{{info.staffName}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">工牌号</div>
                       <div class="menu-info">{{info.workCard}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">项目组别</div>
                       <div class="menu-info">{{info.groupName}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">负责项目</div>
                       <div class="menu-info">{{returnProjectStr(info.doingProject)}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">项目阶段</div>
                       <div class="menu-info">{{returnProjectPhase(info.doingProject)}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">职位</div>
                       <div class="menu-info">{{info.positionName}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">最新空闲时间</div>
                       <div class="menu-info">{{info.startTime?`从${info.startTime.split(' ')[0]}之后`:''}}</div>
                   </div>
                    <div class="menu-list">
                       <div class="menu-name">等级</div>
                       <div class="menu-info">{{info.levelName}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">项目角色</div>
                       <div class="menu-info">{{returnRolePhase(info.doingProject)}}</div>
                   </div>
                    <div class="menu-list">
                       <div class="menu-name">负责部件及状态</div>
                       <div class="menu-info">
                            <div class="box box-pack-center">
                                <div class="part-item" style="padding:0 20px;border-right:1px solid #ddd;" v-for="(item,index) in info.doingProject" :key="index">
                                    <div style="margin-bottom:10px">{{item.taskDTOS[0].partsName?item.taskDTOS[0].partsName:'/'}}</div>
                                    <div>{{item.taskDTOS[0].partsStatusName?item.taskDTOS[0].partsStatusName:'/'}}</div>
                                </div>
                            </div>
                       </div>
                   </div>   
               </div>
           </div>
       </div>  
        <el-dialog
                :visible.sync="dialogVisible"
                size="tiny"
        >
            <img style="width: 100%" :src="imgUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            takeoutId:'',
            dataList:'',
            info:'',
            imgUrl:'',
            dialogVisible:false,
        }
    },
    created() {
        this.takeoutId = this.$router.currentRoute.query.id;
        this.getFoodDetail();
    },
    methods: {
        getFoodDetail:function(){
            let url = CONSTANT.URL.STAFF.FINDSTAFFBYID,
                data={
                    id:this.takeoutId
                }
            common.requestAjax(url,JSON.stringify(data),{},(res)=>{
                if(res.status == 200){
                    let data = res.data;
                    this.info = data.bussData
                }
            })
        },
        imgClick(url){
            this.imgUrl = url;
            this.dialogVisible = true;
        },
        returnProjectStr(arr){
            let str,arr1=[];
            if(arr&&arr.length){
                arr.map((item)=>{
                    let val = item.projectName?item.projectName:'/'
                    arr1.push(val)
                })
                 str = arr1.join(',')
            }else{
                str = '/'
            }
            return str;
        },
        returnProjectPhase(arr){
            let str,arr1=[];
            if(arr&&arr.length){
                arr.map((item)=>{
                    let val = item.phaseName?item.phaseName:'/'
                    arr1.push(val)
                })
                 str = arr1.join(',')
            }else{
                str = '/'
            }
            return str;
        },
        returnPosition(arr){
            let str,arr1=[];
            if(arr&&arr.length){
                arr.map((item)=>{
                    let val = item.positionName?item.positionName:'/'
                    arr1.push(val)
                })
                 str = arr1.join(',')
            }else{
                str = '/'
            }
            return str;
        },
        returnRolePhase(arr){
            let str,arr1=[];
            if(arr&&arr.length){
                arr.map((item)=>{
                    let val = item.taskDTOS[0].projectRole?item.taskDTOS[0].projectRole:'/'
                    arr1.push(val)
                })
                 str = arr1.join(',')
            }else{
                str = '/'
            }
            return str;
        }
    }
}
</script>

<style lang="scss" scoped>
    .food-container {
        .header{
            height: 46px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
            }
        }
        .main{
            margin-left: 5%;
            .table-wrap{
                width: 100%;
                margin-top: 30px;
                background-color: #fff;
                .header-wrap{
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px; 
                    border: 1px solid #dedede;
                    padding-left: 50px;
                    background-color: #f5f5f5;
                    color: #000;
                    font-weight: bold;
                }
                .wrap-menu{
                    border-right: 1px solid #dedede;
                    border-left: 1px solid #dedede;
                    .menu-list{
                          border-bottom: 1px solid #dedede;
                          display: -webkit-box;
                          display: box;
                          display: -moz-box;
                          /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                          display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                          display: flex;
                         -webkit-box-align: center;
                         -moz-align-items: center;
                         -webkit-align-items: center;
                         align-items: center;
                         min-height: 80px;
                         font-size: 14px;
                         cursor: pointer;
                         &:hover{
                            background-color: #f5f7fa;
                         }
                         .menu-name{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                                /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                             -webkit-box-justify-content:  flex-end;
                            -moz-align-justify-content:  flex-end;
                            -webkit-align-justify-content:  flex-end;
                            justify-content:  flex-end;
                             flex: 1;
                             -webkit-flex: 1;
                             text-align: right;
                             min-height: 80px;
                             border-right: 1px solid #dedede;
                             color: #909399;
                             padding: 10px  30px 10px 0;
                         }
                        .menu-info{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                                /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                             -webkit-box-justify-content:  flex-start;
                            -moz-align-justify-content:  flex-start;
                            -webkit-align-justify-content:  flex-start;
                            justify-content:  flex-start;
                            min-height: 80px;
                             flex: 3;
                             -webkit-flex: 3;
                              padding: 10px  0px 10px 30px;;
                             .image-info{
                                 width: 100px;
                                cursor: pointer;
                                 margin-right: 10px;
                             }
                             .avatar{
                                 width: 80px;
                                 height: 80px;
                                 border-radius: 50%;
                                 -webkit-border-radius: 50%;
                             }
                         }
                    }
                }
            }
        }
    }
</style>
